// src/pages/Orders.js
import React, { useState, useEffect } from 'react';
import { Table, Button, Form, Select, DatePicker } from 'antd';
import axios from 'axios';

const { Option } = Select;
const { RangePicker } = DatePicker;

const Orders = () => {
  const [orders, setOrders] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
  });
  const [filterForm] = Form.useForm();

  const fetchOrders = async (params = {}) => {
    setLoading(true);
    try {
      const response = await axios.get('/api/orders', {
        params: {
          ...params,
          page: pagination.current,
          pageSize: pagination.pageSize,
        },
      });
      console.log('order',response)
      setOrders(response.data.orders);
      setPagination({
        ...pagination,
        total: response.data.total || 0,
      });
    } catch (error) {
      console.error('获取订单列表失败', error);
    } finally {
      setLoading(false);
    }
  };

  
  useEffect(() => {
    fetchOrders();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleTableChange = (pagination) => {
    setPagination(pagination);
    fetchOrders();
  };

  const handleFilter = async () => {
    const values = await filterForm.validateFields();
    fetchOrders(values);
  };

  const handleReset = () => {
    filterForm.resetFields();
    fetchOrders();
  };

  const columns = [
    { title: '订单ID', dataIndex: 'id', key: 'id' },
    { title: '用户', dataIndex: 'user', key: 'user' },
    { title: '金额', dataIndex: 'amount', key: 'amount' },
    { title: '状态', dataIndex: 'status', key: 'status' },
    { title: '日期', dataIndex: 'date', key: 'date' },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Button size="small">查看详情</Button>
      ),
    },
  ];

  return (
    <div>
      <Form
        form={filterForm}
        layout="inline"
        className="mb-4"
      >
        <Form.Item name="status" label="订单状态">
          <Select placeholder="请选择状态">
            <Option value="pending">待支付</Option>
            <Option value="paid">已支付</Option>
            <Option value="shipped">已发货</Option>
            <Option value="completed">已完成</Option>
            <Option value="cancelled">已取消</Option>
          </Select>
        </Form.Item>
        
        <Form.Item name="dateRange" label="日期范围">
          <RangePicker />
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" onClick={handleFilter}>
            查询
          </Button>
        </Form.Item>
        
        <Form.Item>
          <Button onClick={handleReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
      
      <Table
        dataSource={orders}
        columns={columns}
        pagination={pagination}
        loading={loading}
        onChange={handleTableChange}
        rowKey="id"
      />
    </div>
  );
};

export default Orders;